import React,{useState} from 'react'
import './App.css'
import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'


export default function App() {

    //因为本来是向后端拿去数据，这里先初始一个值
    const [todoList,setTodoList] = useState([
      {id:nanoid(),todo:'奥迪',done:false},
      {id:nanoid(),todo:'红旗',done:false},
      {id:nanoid(),todo:'宝马',done:false},
      {id:nanoid(),todo:'奔驰',done:false}
    ])
  
    //封装一个函数,拿到输入的值
  const getNameFn =(car)=>{
    // console.log(car);
    //创建一个对象，来接受值
    const NewCarName = {id:nanoid(),todo:car,done:false}
    // console.log(NewCarName);
    //每次添加数据都要更新数据，不要用原来的
    setTodoList([...todoList,NewCarName])
  }

  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <Header getNameFn = {getNameFn}/>
      <List todoList={todoList} setTodoList={setTodoList} />
      <Footer todoList={todoList} setTodoList={setTodoList}/>
    </div>
  </div>
  )
}
